<!--
 * @Description: 
 * @Date: 2024-05-15 15:53:43
 * @LastEditTime: 2024-09-07 17:01:07
-->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '检察官',
    navigationBarTextStyle: 'white', //标题栏字体颜色
    navigationBarBackgroundColor: '#0063AF', //标题栏背景色(纯色)
  },
}
</route>
<template>
  <view class="visit w-screen h-screen px-40rpx py-30rpx box-border bg-#FFFFFF">
    <view class="border-rd-10rpx py-20rpx cardShadow">
      <scroll-view class="w-100%" scroll-x="true">
        <view class="flex flex-nowrap gap-15rpx">
          <view
            v-for="(item, index) in dateList"
            :key="index"
            class="scroll-item flex flex-col justify-center items-center gap-40rpx"
            @click="handleDate(item, index)"
          >
            <view class="color-#B8B9BA text-24rpx">{{ index ? getDayOfWeek(item) : '今日' }}</view>
            <view
              class="w-80rpx h-65rpx border-rd-47% bg-#E5F0FF color-#000 flex justify-center items-center"
              :class="{ 'scroll-item-active': scrollActive == index }"
            >
              {{ item.getDate() }}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="my-30rpx font-bold">可约检察官</view>
    <view v-if="visitSubList.length > 0">
      <view
        class="cardShadow py-30rpx border-rd-10rpx mb-30rpx"
        v-for="item in visitSubList"
        :key="item"
      >
        <view class="flex px-20rpx gap-20rpx">
          <view class="w-150rpx h-150rpx border-rd-50% overflow-hidden">
            <img
              class="w-100% h-100%"
              :src="
                item.acceptUser && item.acceptUser.avatar
                  ? baseUrl + item.acceptUser.avatar
                  : userImg
              "
            />
          </view>
          <view class="flex-1 flex flex-col gap-20rpx">
            <text class="font-bold">{{ item.acceptUser ? item.acceptUser.nickname : '' }}</text>
            <text class="text-28rpx color-#828282">
              {{ item.acceptUser ? item.acceptUser.introduction : '' }}
            </text>
          </view>
        </view>
        <view class="my-20rpx w-100% h-2rpx bg-#F4F4F4"></view>
        <view class="flex justify-end px-40rpx">
          <wd-button @click="handleSub(item.acceptUserId)">立即预约</wd-button>
        </view>
      </view>
    </view>
    <view v-if="visitSubList.length <= 0">
      <wd-status-tip image="message" tip="暂无数据！" />
    </view>
  </view>
</template>
<script lang="ts" setup>
import { getUserListAPI, getInterviewListAPI } from '@/service/index/foo'
import { formatTime } from '@/utils/index'
import { useUserStore } from '@/store'
import userImg from '../../static/mine/头像.png'
const baseUrl = import.meta.env.VITE_SERVER_BASEURL
const userStore = useUserStore()
const visitSubList = ref([])
const dateList = ref([])
const scrollActive = ref(0)
const activeTime = ref()
onLoad(() => {
  getNextTwoWeeks()
  activeTime.value = formatTime(dateList.value[0], 'yyyy-MM-dd')
  getList()
})

function getList() {
  getInterviewListAPI({
    acceptTime: activeTime.value,
    pageNo: 1,
    pageSize: 100,
  }).then((res) => {
    visitSubList.value = uniqueByProp(res.data.list, 'acceptUserId')
  })
}
function uniqueByProp(arr, prop) {
  return arr.filter(
    (item, index, self) => self.findIndex((other) => other[prop] === item[prop]) === index,
  )
}
/**
 * @description: 检察官跳转
 * @param {*} id
 * @param {*} nickname
 * @return {*}
 */
function handleSub(id) {
  // uni.navigateTo({
  //   url: `/pages/visit/visitSub?id=${id}&nickname=${nickname}`,
  // })
  uni.navigateTo({
    url: `/pages/visit/visitInfo?id=${id}&time=${activeTime.value}`,
  })
}
/**
 * @description: 获取今后两周的数据
 * @return {*}
 */
function getNextTwoWeeks() {
  const dates = []
  const today = new Date()
  for (let i = 0; i < 14; i++) {
    // 两周共有 14 天
    const date = new Date(today)
    date.setDate(today.getDate() + i)
    dates.push(new Date(date))
  }
  dateList.value = dates
}
/**
 * @description: 获取星期几
 * @param {*} date
 * @return {*}
 */
function getDayOfWeek(date) {
  const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  return days[date.getDay()]
}

function handleDate(item, index) {
  scrollActive.value = index

  activeTime.value = formatTime(item, 'yyyy-MM-dd')
  getList()
}
</script>
<style lang="scss" scoped>
.cardShadow {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.scroll-item:first-of-type {
  padding-left: 28rpx;
}

.scroll-item:last-of-type {
  padding-right: 28rpx;
}

.scroll-item-active {
  background: #006eff;

  color: #fff;
}

:deep(.wd-button) {
  margin: 0;
  background: #006eff !important;
  border-radius: 10rpx !important;
}

::v-deep ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
</style>
